import React from 'react'
import Layout from '../core/Layout'
import { Row, Col } from 'antd';
import Menu from 'antd/lib/menu'
import { Link } from 'react-router-dom';
import { FC } from 'react-router/node_modules/@types/react';
import {
    ShoppingCartOutlined,
    UserOutlined,
    OrderedListOutlined

} from '@ant-design/icons'
import { Descriptions } from 'antd';
import { Typography } from 'antd';
import { User, UserData } from '../../consts/auth';
import { isAuth } from '../../helpers/auth';

const { Title } = Typography;

interface LinkProp {
    to: string,
    name: string,
    iconComponent?:React.ComponentType<any>
}

interface DashBoardMenuItemComponentProps {
    listItem: LinkProp[]
}
const  DashBoardMenuItemComponent: FC<DashBoardMenuItemComponentProps> = ({listItem}) => {
    return(
            <Menu>
                {
                    listItem.map(item => (
                        <Menu.Item key={item.to}>
                            {
                                item.iconComponent &&  <item.iconComponent /> 
                            }
                            <Link to={'/' + item.to} key={item.to} >{item.name}</Link>
                        </Menu.Item>
                    ))
                }
            </Menu>
    )
}


interface DescriptComponentProps {
    user: User
}
const DescriptComponent: FC<DescriptComponentProps>  = ({user}) => {
    return (
        <Descriptions title="管理员信息">
            <Descriptions.Item label='昵称'>{user.name}</Descriptions.Item>
            <Descriptions.Item label='邮件'>{user.email}</Descriptions.Item>
            <Descriptions.Item label='角色'>{user.role === 1 ? '管理员' : '用户'}</Descriptions.Item>
        </Descriptions>
    )
}

const AdminDashboard = () => {
    
    const DashBoardMenuItemComponentList: LinkProp[] = [
        {
            to:'create/category',
            name:'添加分类',
            iconComponent: ShoppingCartOutlined
        },
        {
            to:'create/product',
            name:'添加产品',
            iconComponent: UserOutlined
        },
        {
            to:'3',
            name:'订单列表',
            iconComponent: OrderedListOutlined
        }
    ]
    const {user} = isAuth() as UserData;
    return (
        <Layout title="AdminDashboard" subTitle="">
            <Row>
                <Col span={6}>
                    <Title level={2}>管理员链接</Title>
                    <DashBoardMenuItemComponent listItem={DashBoardMenuItemComponentList}/>
                </Col>
                <Col span={18} >
                    <DescriptComponent user={user}/>
                </Col>
            </Row>,
        </Layout>
    )
}

export default AdminDashboard
